<template>
  <div id="app">
    <Post @subClk="getSub"/>
    <hr>
    <GetP :arr="arr"/>
    <hr>
    <!-- 动态组件 -->
    <button @click="comFun('HelloWorld')">1</button>
    <button @click="comFun('ErrorPage')">2</button>
    <component :is="abc"/>
  </div>
</template>

<script>
import Post from "./components/Post";
import GetP from "./components/GetP";
import HelloWorld from "./components/HelloWorld";
import ErrorPage from "./components/ErrorPage";
export default {
  name: "App",
  data() {
    return {
      arr: [],
      abc: "ErrorPage",
      text: ""
    };
  },
  mounted() {
    console.log("app-mounted");

    let a = JSON.parse(localStorage.getItem("data"));
    if (a) {
      this.arr = a;
    }
  },
  methods: {
    getSub(...a) {
      this.arr.push([...a]);
      localStorage.setItem("data", JSON.stringify(this.arr));
    },
    comFun(com) {
      this.abc = com;
    }
  },
  components: {
    Post,
    GetP,
    HelloWorld,
    ErrorPage
  },
  beforeCreate() {
    console.log("app-beforeCreate");
  },
  created() {
    console.log("app-created");
  },
  beforeMount() {
    console.log("app-beforeMount");
  },
  // mounted() {
  //   console.log("app-mounted");
  // },
  beforeUpdate() {
    console.log("app-beforeUpdate");
  },
  updated() {
    console.log("app-updated");
  },
  beforeDestroy() {
    console.log("app-beforeDestroy");
  },
  destroyed() {
    console.log("app-destroyed");
  }
};
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
